/*无限下拉刷新*/

import React, {Component,PropTypes} from 'react';
import { Row,Col,Button,Select } from 'antd';
import {connect} from 'dva';

const Option = Select.Option;

class DropdownRefresh extends Component{
	constructor(props){
    super(props);
    console.log('DropdownRefresh-props',props)
    // const indexArr = props.data.slice(0,20)
    this.state = {
      indexList:props.data,//当前渲染25条数据
      currentpage:props.page.currentpage
    };
  }
  
	handleChange=(value)=> {
  	console.log(`selected ${value}`);
	}

	onPopupScroll=(e)=> {
	  const {currentpage} = this.state;
	  console.log('DropdownRefresh>state1',currentpage)
	  const ele = document.querySelector('.ant-select-dropdown-menu ');
	  // if (ele) {
			var scrollerscrollHeight = ele.scrollHeight; // 容器滚动总高度
	    var scrollerHeight = ele.getBoundingClientRect().height;// 容器滚动可见高度
	    var scrollerTop = ele.scrollTop;//滚过的高度
	    
	    if(scrollerscrollHeight == scrollerTop + scrollerHeight){
	    	this.setState({
	    		currentpage:2
	    	})
	    	console.log('DropdownRefresh>state',this.state)
    		this.props.dispatch({
	    		type: 'product/getAllpdt',
					payload:{
						currentpage:this.state.currentpage,
						pagesize:25,
					}
	    	})
    	}
		// }
	  
	}
  componentWillReceiveProps(nextProps) {
  	console.log('DropdownRefresh-nextProps',this.props,nextProps)
  	this.setState({
  		indexList:this.props.data.concat(nextProps.data),
  	})
  	this.onPopupScroll()
  }
	handleFocus=()=> {
	  console.log('focus');
	}

	render(){
		const {data}=this.props;
		const {indexList}=this.state;
		console.log('DropdownRefresh-render',this.props,this.state)

		return(
			 <Select
		    showSearch
		    style={{ width: 200 }}
		    placeholder="Select a person"
		    onChange={this.handleChange}
		    onFocus={this.handleFocus}
		    onPopupScroll={this.onPopupScroll}
		    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
		  >
		    {
		    	indexList.map((item,i)=><Option value={`${item.productId}`} key={i}>{`${item.productCode}-${item.productName}`}</Option>)
		    }
		  </Select>
			
		)
	}
}
export default connect(({ product }) => ({ product }))(DropdownRefresh)